<template>
  <div id="index">
    <div id="box">
      <div id="user">
        <span>用户名：</span>
        <input type="text" v-model="username" @click="errorDisplay = 'hidden'">
      </div>
      <div id="password">
        <span>密码：</span>
        <input type="password" v-model="password" @click="errorDisplay = 'hidden'">
      </div>
      <span :style="{'visibility':errorDisplay}" id="error" >{{error}}</span>
      <button @click="toNext()">登录</button>
    </div>
    <div style="display: flex;flex-direction: column;margin-left: 2rem;margin-top: 2rem;height: min-content">
      <span style="color: blue">(商家端) 账户：admin 密码：123456</span>
      <span style="color: blue">(客户端) 账户：customer 密码：123456</span>
    </div>
    <span style="color: red;margin-left:0.6rem;height: min-content;margin-top: 0">说明：本页面仅用于测试两个端口，实际无该页面</span>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        username:'',
        password:'',
        error:'错误',
        errorDisplay: 'hidden',
      }
    },
    methods:{
      toNext(){
        console.log(this.username);
        console.log(this.password);
        if(this.username.toString() === 'admin'){
          if(this.password.toString() === '123456'){
            console.log("登录成功");
            wx.navigateTo({
              url:'/pages/storeManagement/main'
            });
          }else {
            this.error = '密码错误，请重新输入！！！'
            this.errorDisplay = 'visible';
          }
        } else if(this.username.toString() === 'customer'){
          if(this.password.toString() === '123456'){
            console.log("登录成功");
            wx.switchTab({
              url:'/pages/index/main'
            });
          }else {
            this.error = '密码错误，请重新输入！！！'
            this.errorDisplay = 'visible';
          }
        }else {
          this.error = '账号错误，请重新输入！！！'
          this.errorDisplay = 'visible';
        }
      }
    }
  }
</script>

<style scoped>
  #index{
    background: #f0f0f0;
    width: 100%;
    height: 100%;
    padding-top: 3rem;
  }
  #box{
    height: 45%;
    width: 90%;
    background: white;
    margin-left: auto;
    margin-right: auto;
  }
  #user{
    padding-top: 1rem;
    margin-left: 0.4rem;
    font-size: 0.45rem;
    display: flex;
    flex-direction: row;
    height: min-content;
  }
  #user input{
    width: 4rem;
    height: 0.6rem;
    margin-left: 0.1rem;
    border: black 1px solid;
  }
  #password{
    margin-left: 0.4rem;
    margin-top: 0.3rem;
    font-size: 0.45rem;
    display: flex;
    flex-direction: row;
    height: min-content;
  }
  #password input{
    margin-bottom: 0.1rem;
    width: 4rem;
    height: 0.6rem;
    margin-left: 0.55rem;
    border: black 1px solid;
  }
  button{
    margin-top: 0.3rem;
    width: 5rem;
    background: green;
    color: white;
  }
  #error{
    color: red;
    margin-left: 4em;
  }
</style>
